<template>
  <div style="margin: auto"><h1>销售出库</h1></div>
  <div>
    供应商
    <el-select v-model="sale.clientId" placeholder="请选择"  style="margin-top: 20px">
      <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @click="findById(item.id)"
      >
      </el-option>
    </el-select>
    <span style="margin-left: 100px">销售员:{{this.loginUser.name}}</span>
    <span style="margin-left: 20px">订单总额:{{this.int}}</span><br>
    <span >送货地址:{{this.customer.address}}</span>
  </div>
  <el-table
      :data="shop"
      height="250"
      border
      style="width: 100%;margin-top: 200px">
    <el-table-column
        prop="goodsBean.name"
        label="商品名称名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="goodsBean.brand"
        label="品牌"
        width="200">
    </el-table-column>
    <el-table-column
        prop="goodsBean.sellPrice"
        label="建议销售价"
        width="150">
    </el-table-column>
    <el-table-column
        prop="num"
        label="销售数量"
        width="150">
      <template #default="scope">
        <el-input v-model="scope.row.num" @blur="updateNum(scope.row);getTotalPrice(this.loginUser.id)"/>
      </template>
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="del(scope.row.id)">移除商品</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-button type="primary" @click="findByItem(1)" style="margin-top: 60px;margin-left: 50px;size: 20px">添加商品</el-button>
  <el-button type="primary" @click="checkout" style="margin-top: 60px;margin-left: 500px;size: 20px">出库</el-button>

  <el-dialog
      v-model= "addGoodsDiv"
      title="添加采购商品"
      width="80%"
      center>
  <el-table
      :data="cutObj.records"
      height="250"
      border
      style="width: 100%"
      >
    <el-table-column
        prop="name"
        label="商品名称"
        width="300">
    </el-table-column>
    <el-table-column
        prop="genre"
        label="类别"
        width="150">
    </el-table-column>
    <el-table-column
        prop="brand"
        label="品牌"
        width="200">
    </el-table-column>
    <el-table-column
        prop="num"
        label="库存数量"
        width="150">

    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template #default="scope">
        <el-button type="primary" size="small" @click="add(scope.row.number)">添加</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentpage="cutObj.current"
      v-model:page-size="cutObj.size"
      background
      layout="prev, pager, next,jumper"
      :total="cutObj.total"
      @current-change="findByItem">
  </el-pagination>

    <el-button type="primary" @click="this.addGoodsDiv=false;this.findByUserId(this.loginUser.id);this.getTotalPrice(this.loginUser.id);" style="margin-top: 30px;margin-left: 100px;size: 20px" >返回</el-button>

  <div class="searchDiv">
    <el-row>
      <el-col :span="10">商品名称<input type="text" v-model="findObj.name"></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" style="margin-top: 20px">类别
        <el-select v-model="findObj.genre" placeholder="请选择" :value-key="findObj.id" >
          <el-option
              v-for="item in genre"
              :key="item.id"
              :label="item"
              :value="item"
              @click=""
          >
          </el-option>
        </el-select></el-col>
    </el-row>
    <el-row>
      <el-col :span="8" style="margin-top: 20px"><el-button type="primary" @click="findByItem(1)">搜索</el-button></el-col>
    </el-row>
  </div>
    </el-dialog>

  <el-dialog
      v-model= "addDiv"
      title=""
      width="20%"
      center>
    <h3>添加成功</h3>
    <el-button type="primary" @click="this.addDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>

  <el-dialog
      v-model= "delDiv"
      title=""
      width="20%"
      center>
    <h3>出库成功</h3>
    <el-button type="primary" @click="this.delDiv=false" style="margin-top: 30px;margin-left: 100px;size: 20px" >确定</el-button>
  </el-dialog>
</template>
<script>
import axios from "axios";
export default {
  data(){
    return{
      shop: [],
      findObj:{},
      options:[],
      loginUser:{},
      sale:{},
      saleGoods:{},
      customer:{},
      int:0,
      cutObj:[],
      addGoodsDiv:false,
      addDiv:false,
      delDiv:false,
      genre:[],
    }
  },
  methods:{
    findByUserId(userId){
      axios.get("/project/saleCar/findByUserId",{params:{
          userId
        }}).then(resp=>{
        this.shop = resp.data;
      })
    },
    getLoginUser(){
      axios.get("/project/user/getLoginUser").then(resp=>{
        this.loginUser=resp.data;
      })
    },
    findAll(){
      axios.get("/project/customer/findAll").then(resp=>{
        this.options=resp.data;
      })
    },
    del(saleCarId){
      axios.get("/project/saleCar/del",{params:{saleCarId}}).then(resp=>{
        if (resp.data=="ok"){
          this.findByUserId(this.loginUser.id)
        }
      })
    },
    findById(id){
      axios.get("/project/customer/findById",{params:{id}}).then(resp=>{
        this.customer=resp.data;
      })
    },
    getTotalPrice(userId){
      axios.get("/project/saleCar/getTotalPrice",{params:{userId}}).then(resp=>{
        this.int=resp.data;
      })
    },
    findByItem(pageNo){
      this.findObj.pageNo = pageNo;
      this.addGoodsDiv=true;
      this.findObj.price=0;
      axios.get("/project/goods/findByItem",{params:this.findObj}).then(resp=>{
        this.cutObj = resp.data;
      })

      axios.get("/project/goods/findTypes").then(resp => {
      this.genre=resp.data;
      })
    },
    add(number){
      axios.get("/project/saleCar/add",{params:{
        number:number,
          userId:this.loginUser.id
        }}).then(resp=>{
          if (resp.data=="ok"){
            this.addDiv=true;
          }
      })
    },
    updateNum(shop){
      axios.get("/project/saleCar/update",{params:{
          saleCarId:shop.id,
          num:shop.num,
        }}).then(resp=>{
        if (resp.data=="ok"){
          this.findByUserId(this.loginUser.id);
        }
      })
    },
    checkout(){
      axios.get("/project/sale/add",{params:{
          userId:this.loginUser.id,
          user:this.loginUser.name,
          address:this.customer.address,
          totalPrice:this.int,
          clientId:this.sale.clientId,
        }}).then(resp=>{
          if (resp.data=="ok"){
            this.delDiv=true;
            this.int=0;
            this.findByUserId(this.loginUser.id)
          }
      })
    }

  },
  created() {
    this.getLoginUser();
    this.findAll();
  }
}
</script>

<style scoped>
.searchDiv{
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  margin-left: 500px;

}

</style>